<?
session_start();
include('../config.php');
include("../classes/connect.php");
require_once('../classes/class.jira.php');

?>
<!DOCTYPE html>
<html>
<head>
   <title>Posts</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >

    <link href="examples/content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="styles/kendo.dataviz.min.css" rel="stylesheet">
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
	<link href="../css/demo.css" rel="stylesheet">

    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.dataviz.min.js"></script>
    <script src="examples/content/shared/js/console.js"></script>
	<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
	
	<?
	$sql = 'select * from sys_jobposts';
	$postsql = mysql_query($sql);
	$postid = array();
	while($row = mysql_fetch_array($postsql)){
		$postid[]=$row['code'];
	}
	
	?>
</head>
<body> 
	      <div id="example" class="k-content">
            <div class="chart-wrapper">
                <div id="chart"></div>
            </div>
            <script>
 $(function() {
	$( "#fromdatepicker" ).datepicker({ maxDate: "-1d" });
	$( "#todatepicker" ).datepicker({ maxDate: "0d" });
	});
	function datecheck(){
		var fromdate=$( "#fromdatepicker" ).datepicker( "getDate" );;
		var todate=$( "#todatepicker" ).datepicker( "getDate" );
		
		var fromdatestr1=$.datepicker.formatDate('yy/mm/dd', fromdate);
		var todatestr1=$.datepicker.formatDate('yy/mm/dd', todate);
				
		if(fromdate==null || todate==null){
			alert('Please Enter a valid date');
		}
		var dates= new Array();
		while(fromdate<=todate){
			var current=$.datepicker.formatDate('yy/mm/dd', fromdate);
			// alert(current);
			dates.push(new Date(current));						
			fromdate.setDate(fromdate.getDate()+1);					
		}
		$.ajax({
		  url: 'ajax.php?fromdate1='+fromdatestr1+'&todate1='+todatestr1,
		  dataType:'json'
		}).done(function(json) { 
			var cse=new Array();
			var dotnet = new Array();
			var php = new Array();
			var we = new Array();
			for(index=0;index<dates.length;index++){
			
			   var currentdate = (+dates[index])/1000;
			   var currentdate2 = dates[index];			   
			   var nextday = new Date($.datepicker.formatDate('yy/mm/dd', currentdate2));
			   nextday = nextday.setDate(nextday.getDate()+1);
			   nextday = (+nextday)/1000;
			   
			   var Cphp=0;
			   var Cdotnet=0;
			   var Cwe=0;
			   var Ccse=0;
				 $.each(json , function(i,element) { 
					if((element=="DOTNET" || element==".NET") && i<nextday){
						Cdotnet++;
					}
					if(element=="PHP" && i<nextday){
						Cphp++;
					}
					if(element=="CSE" && i<nextday){
						Ccse++;
					}
					if(element=="WE" && i<nextday){
						Cwe++;
					}
				 });
				cse.push(Ccse);
				dotnet.push(Cdotnet);
				php.push(Cphp);
				we.push(Cwe);
			}
			createChart(dates,cse,dotnet,php,we);
		});
	}

			    function createChart(dates,cse,dotnet,php,we) {
					$("#chart").kendoChart({
					theme: $(document).data("kendoSkin") || "default",
					title: {
						text: "Applications for Different posts"
					},
					series: [{
						type: "line",
						data: cse,
						color: "#00FFFF",
						name: "CSE"
					}, {
						type: "line",
						data: dotnet,
						color: "#330000",
						name: "DOTNET"
					},{
						type: "line",
						data: php,
						color: "#336600",
						name: "PHP"
					},{
						type: "line",
						data: we,
						color: "#33FF00",
						name: "WE"
					}],
					tooltip: {
                            visible: true
                    },
					categoryAxis: {
						baseUnit: "weeks",
						categories: dates
					},
					valueAxis: {
						title: { text: "No of Applications" },
						min: 0 
					 }
				});
                }

                $(document).ready(function() {
                    setTimeout(function() {
                        // Initialize the chart with a delay to make sure
                        // the initial animation is visible
                        createChart();

                        $("#example").bind("kendo:skinChange", function(e) {
                            createChart();
                        });
                    }, 400);
                });
            </script>
        </div>
<div class="repfromdate">
    <p>From: <input type="text" id="fromdatepicker"/></p>
	</div>
	<div class="reptodate">
	<p>To: <input type="text" id="todatepicker"/></p>
	</div>
	<div class="repsubmit">
	<input type="button" value="submit" onclick="datecheck();"/>
	</div>  
</body>
</html>
